<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: none;
			}
			ul, li {
				list-style: none;
			}
			
			#box {
				width: 500px;
				height: 400px;
				margin: 10px auto;
			}
			
			#list1 {
				height: 26px;
			}
			#list1 li {
				width: 30px;
				float: left;
				background: #ddd;
				height: 26px;
				line-height: 26px;
				padding: 0 10px;
				cursor: pointer;
			}
			
			#list2 {
				width: 480px;
				height: 320px;
				background: #abcdef;
				padding: 10px;
			}
			#list2 li, #list2 img {
				width: 480px;
				height: 320px;
			}
			#list2 li {
				/*display: none;*/
			}
			#list1 li.hover {
				background: #ABCDEF;
				color: white;
			}
			
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			$(function(){
				
				//tab切换
				$("#list2").find("li").first().show().siblings().hide();
				//
				$("#list1 li").click(function(){
					//console.log( $(this).index() );
					$(this).addClass("hover").siblings().removeClass("hover")
					$("#list2 li").eq( $(this).index() ).show().siblings().hide();
				})
				
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="list1">
				<li class="hover">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
			<ul id="list2">
				<li><img src="images/11.jpg" /></li>
				<li><img src="images/22.jpg" /></li>
				<li><img src="images/33.jpg" /></li>
			</ul>
		</div>
	</body>
</html>
